<template>
  <div class="infos">
    <div class="name">{{ topInfos.houseName }}</div>
    <div class="tags">
      <template v-for="(item, index) in topInfos.houseTags" :key="index">
        <span class="item" v-if="item.tagText" :style="{ color: item.tagText.color, background: item.tagText.background.color}">
          {{ item.tagText.text }}
        </span>
      </template>
    </div>
    <div class="comment">
      <div class="left">
        <span class="score">{{ topInfos.commentBrief.overall }}</span>
        <span class="title">{{ topInfos.commentBrief.scoreTitle }}</span>
        <span class="brief">{{ topInfos.commentBrief.commentBrief }}</span>
      </div>
      <div class="right">
        <span class="count">{{topInfos.commentBrief.totalCount}}条评论&gt;</span>
      </div>
    </div>
    <div class="location">
      <div class="left">
        {{ topInfos.nearByPosition.address }}
      </div>
      <div class="right">
        地图 周边 &gt;
      </div>
    </div>
  </div>
  <!-- <h2>{{topInfos.houseName}}</h2> -->
</template>

<script setup>
  const props =  defineProps({
    topInfos: {
      type: Object,
      default: () => ({})
    }
  })

  console.log(props.topInfos)
</script>

<style lang="less" scoped>
  .infos {
    margin: 10px;
    .name {
      font-size: 20px;
      font-weight: 700;
      color: #444;
    }
    .tags {
      margin: 5px 0;
      .item {
        margin-right:5px;
      }
    }
    .comment {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px;
      margin: 6px 0;
      border-radius: 5px;
      background-color: rgb(245,245,245);
      .left {
        .score {
          font-size: 18px;
          font-weight: 700;
        }
        .title {
          margin: 0 4px;
          font-weight: 700;
        }
        .brief {
          color: #666;
        }
      }
      .right {
        .count {
          color: rgb(255, 150, 69);
        }
      }
    }
    .location {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px;
      margin: 6px 0;
      border-radius: 5px;
      background-color: rgb(245,245,245);
      .right {
        color: rgb(255, 150, 69);
      }
    }
  }
</style>
